    <style include="settings-shared passwords-shared">
      .expiration-column {
        align-items: center;
        display: flex;
        flex: 1;
      }

      /* The UPI ID list should be the continuation of the previous list. */
      .list-separator {
        border-top: var(--cr-separator-line);
        width: 100%;
      }
    </style>
    <div id="creditCardsHeading" class="list-item column-header"
        hidden$="[[!showAnyPaymentMethods_]]">
      <div class="type-column">$i18n{creditCardType}</div>
      <div class="expiration-column">$i18n{creditCardExpiration}</div>
    </div>
    <div class="vertical-list list-with-header">
      <template is="dom-repeat" items="[[creditCards]]">
        <settings-credit-card-list-entry credit-card="[[item]]">
        </settings-credit-card-list-entry>
      </template>
    </div>
    <template is="dom-if" if="[[showCreditCardUpiSeparator_]]">
      <div class="list-separator"></div>
    </template>
    <template is="dom-if" if="[[showUpiIds_(upiIds, enableUpiIds_)]]">
      <div class="vertical-list list-with-header">
        <template is="dom-repeat" items="[[upiIds]]">
          <settings-upi-id-list-entry upi-id="[[item]]">
          </settings-upi-id-list-entry>
        </template>
      </div>
    </template>
    <div id="noPaymentMethodsLabel" class="list-item"
        hidden$="[[showAnyPaymentMethods_]]">
      $i18n{noPaymentMethodsFound}
    </div>
